<template xmlns="http://www.w3.org/1999/html">
  <sea-net-frame ref="frameRef" url="/sys/org/page">
    <!-- form-header -->
    <template #title>
      <sea-table-title title="组织结构配置" subtitle="">
        <sea-tips width="260">
          <p>顶级用户群体，例如：公司；</p>
          <p>一个机构包含多个用户组；</p>
          <p>业务上，用机构 ID 隔离数据。</p>
        </sea-tips>
      </sea-table-title>
    </template>

    <!-- form-buttons -->
    <template #buttons>
      <el-button plain title="新增" @click="onAction('new', undefined, undefined)">
        <i class="fa fa-fw fa-plus"></i>
      </el-button>
    </template>

    <!-- form-data -->
    <template #default="{list}">
      <el-table :data="list" border>
        <el-table-column property="organizationName" label="名称" width="180"></el-table-column>
        <el-table-column property="shortName" label="简称" width="180"></el-table-column>
        <el-table-column property="description" label="描述" width="180"></el-table-column>
        <el-table-column property="provinceName" label="省" width="180"></el-table-column>
        <el-table-column property="cityName" label="市" width="180"></el-table-column>
        <el-table-column property="countyName" label="县" width="180"></el-table-column>
        <el-table-column property="gmtCreate" label="创建日期" width="180"></el-table-column>
        <el-table-column property="gmtModified" label="修改日期" width="180"></el-table-column>

        <!--操作栏-->
        <sea-table-actionbar width="180" :action="onAction" :buttons="buttons"></sea-table-actionbar>
      </el-table>
    </template>

  </sea-net-frame>
</template>

<script setup>
import {reactive, ref} from "vue";

// Reference
const frameRef = ref();

const buttons = reactive([
    {type: 'btn', evt: 'edit', label: '编辑', title: '编辑当前行'}
    , {type: 'btn', evt: 'remove', label: '删除', style: 'text-orange', title: '删除当前行'}
])

/**
 * 操作成功回调
 */
const onSucceed = () => {
    this.$refs.tableObject.reload();
}

/**
 * 事件分发
 *
 * @param evt   事件名称
 * @param row   行级数据，可以直接修改
 * @param arg   发生变动的数据信息
 */
const onAction = (evt, row, arg) => {
}
</script>
